
import Pagination from '@/components/pagination';
import mixin from '@/service/mixin';
import SelectAppList from '@/components/select-app-list';
import UploadImageButton from '@/components/upload-image-button';

export default {
    name: 'operation-operational-activities-activity-page',
    components: {
        Pagination,
        SelectAppList,
        UploadImageButton,
    },
    mixins: [mixin],
    data() {
        return {
            form: {
                userPhone: '',
                userId: '',
                appName: '',
                invitationCode: '',
            },
            rules: {
                userPhone: [],
                userId: [],
                invitationCode: [],
            },
            showAddDialog: false,
            activityForm: {
                id: '',
                name: '',
                actionUrl: '',
                introductionImg: '',
                introduction: '',
                operatorId: '',
                operatorName: '',
                appName: '',
            },
            activityFormRules: {
                name: [
                    { required: true, message: this.$t('verify.plsInput') }, // 请输入
                ],
                actionUrl: [
                    { required: true, message: this.$t('verify.plsInput') }, // 请输入
                ],
                introductionImg: [
                    { required: true, message: this.$t('verify.plsUpload') }, // 请上传
                ],
                introduction: [
                    // { required: true, message: this.$t('verify.plsInput') }, // 请输入
                ],
                appName: [
                    { required: true, message: this.$t('verify.plsChoose') }, // 请选择
                ],
            },
        };
    },
    methods: {
        // 获取列表数据
        getTableData(page = this.page) {
            const params = {
                appName: this.form.appName,
                pageNo: page.currentPage,
                pageSize: this.page.pageSize,
            };
            this.$api.operation.fission.getActionInfo(params).then(res => {
                const {status, data, error} = res;
                if ('1' === status && '00000000' === error && data) {
                    this.tableData = data.list;
                    this.page.recordsTotal = data.total;
                    this.page.currentPage = page.currentPage;
                }
                this.tableMaxHeight = document.body.clientHeight - 230;
            });
        },
        // 搜索列表数据
        search() {
            this.page.currentPage = 1;
            this.getTableData();
        },
        // 导出列表数据
        handleShowAdd(row) {
            this.showAddDialog = true;
            if (row) {
                const form = this.activityForm;
                Object.keys(form).forEach(key => {
                    form[key] = row[key];
                });
            } else {
                this.activityForm = {
                    id: '',
                    name: '',
                    actionUrl: '',
                    introductionImg: '',
                    introduction: '',
                    operatorId: '',
                    operatorName: '',
                    appName: '',
                };
                this.$nextTick(() => {
                    const form = this.$refs.activityForm;
                    if (form) {
                        form.clearValidate();
                    }
                });
            }
        },
        // 开关
        handleSwitch(row) {
            // console.log(row);
            const user = this.$storage.get('user');
            const params = {
                id: row.id,
                status: row.status,
                operatorId: user.id,
                operatorName: user.username,
            };
            this.$api.operation.fission.updateActionStatus(params).then(res => {
                const {status, error} = res;
                if ('1' === status && '00000000' === error) {
                    this.$message.success(this.$tc('common.successfulOperation')); // 操作成功
                }
                this.getTableData();
            });
        },
        // 校验图片尺寸
        checkSize(file) {
            return new Promise((resolve, reject) => {
                const img = new Image();
                img.src = URL.createObjectURL(file);
                img.onload = () => {
                    // 释放内存
                    URL.revokeObjectURL(file);
                    const width = img.width || img.naturalWidth;
                    const height = img.height || img.naturalHeight;
                    // console.log(`width: ${width}, height: ${height}`);
                    if (width / height !== 345 / 114) {
                        this.$message.error(this.$tc('operation.bannerSize'));
                        reject();
                    }
                    const activityForm = this.$refs.activityForm;
                    if (activityForm) {
                        activityForm.clearValidate('introductionImg');
                    }
                    resolve();
                };
                img.onerror = () => {
                    reject();
                };
            });
        },
        // 关闭弹框
        closeDialog() {
            this.activityForm = {
                id: '',
                name: '',
                actionUrl: '',
                introductionImg: '',
                introduction: '',
                operatorId: '',
                operatorName: '',
                appName: '',
            };
            this.showAddDialog = false;
        },
        // 提交
        submit() {
            this.$refs.activityForm.validate(value => {
                if (value) {
                    const params = this.activityForm;
                    const user = this.$storage.get('user');
                    params.operatorId = user.id;
                    params.operatorName = user.username;
                    this.$api.operation.fission.editActionInfo(params).then(res => {
                        const {status, error} = res;
                        if ('1' === status && '00000000' === error) {
                            this.$message.success(this.$tc('common.saveSuccess')); // 保存成功
                            this.showAddDialog = false;
                            this.getTableData();
                        }
                    });
                }
            });
        },
        // app列表
        appData(list) {
            if (list) {
                const domain = this.$storage.get('user').domain;
                if ('Pesopop' === domain) {
                    list.forEach(item => {
                        if (item.name === 'PesoHere') {
                            // 默认选中PesoHere
                            this.form.appName = 'PesoHere';
                        }
                    });
                } else {
                    const app = list[0] || {};
                    this.form.appName = app.name || '';
                }
                console.log('appData--')
                this.getTableData();
            }
        },
    },
    created() {
        // this.getTableData();
    }
}
